import { Divider, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';

import React, { useRef, useState } from 'react';
import ProTable from '@ant-design/pro-table';
import { ActionType, ProColumns } from '@ant-design/pro-table/lib/Table';
import { SorterResult } from 'antd/es/table/interface';
import { IOrganizeTableItem } from '@/pages/data.d';
import { ConnectState } from '@/models/connect';
import { connect, Dispatch } from 'umi';

const AddModel = React.lazy(() => import('./components/AddModel'));

interface DatasourceProps {
  dispatch: Dispatch;
}

const Datasource: React.FC<DatasourceProps> = (props) => {
  const [queryParams, setQueryParams] = useState<{}>({}); // 表格搜索关键词
  const [sorter, setSorter] = useState<string>('');
  const actionRef = useRef<ActionType>();
  const [createModalVisible, handleModalVisible] = useState<boolean>(false); // 新建弹框
  // const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false); // 权限管理弹框
  // const [stepFormValues, setStepFormValues] = useState({});

  const columns: ProColumns<IOrganizeTableItem>[] = [
    {
      title: '数据源名称',
      dataIndex: 'name',
    },
    {
      title: '类型',
      dataIndex: 'type',
      hideInSearch: true,
    },
    {
      title: 'URL',
      dataIndex: 'url',
      hideInSearch: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_: any, record: any) => (
        <>
          <a>编辑</a>
          <Divider type="vertical" />
          <a>删除</a>
        </>
      ),
    },
  ];

  const testDataSource = [
    {
      name: '管理者自助',
      type: 'impala',
      url: 'jdbc:impala://10.2.3.87:250/ods_shr',
    },
    {
      name: '管理者自助',
      type: 'impala',
      url: 'jdbc:impala://10.2.3.87:250/ods_shr',
    },
    {
      name: '管理者自助',
      type: 'impala',
      url: 'jdbc:impala://10.2.3.87:250/ods_shr',
    },
  ];


  return (
    <div>
      <ProTable<IOrganizeTableItem>
        actionRef={actionRef}
        rowKey="name"
        options={{
          fullScreen: true,
          reload: false,
          setting: true,
          density: true,
        }}
        onChange={(_, _filter, _sorter) => {
          const sorterResult = _sorter as SorterResult<IOrganizeTableItem>;

          if (sorterResult.field) {
            setSorter(`${sorterResult.field}_${sorterResult.order}`);
          }
        }}
        params={{
          sorter,
        }}
        toolBarRender={(action, { selectedRows }) => [
          <Button type="primary" onClick={() => handleModalVisible(true)}>
            <PlusOutlined /> 新建
          </Button>,
        ]}
        dataSource={testDataSource.filter((value) => {
          const keys = Object.keys(queryParams);
          if (keys.length === 0) {
            return true;
          } else {
            for (let i in keys) {
              const key = keys[i];
              if (value[key].toString().indexOf(queryParams[key]) === -1) {
                return false;
              }
            }
          }
          return true;
        })}
        onSubmit={(params) => {
          setQueryParams(params);
        }}
        columns={columns}
      />

      {/* 新建弹框 */}
      <React.Suspense fallback={null}>
        <AddModel visible={createModalVisible} onCancel={() => handleModalVisible(false)} />
      </React.Suspense>
    </div>
  );
};
export default connect(({}: ConnectState) => ({}))(Datasource);
